<!-- Do NOT put any DOCTYPE here unless you want problems in IEs. -->
<html>

<!-- Each valid html page must have a head; let's create one. -->
<head>
<!-- The following line defines content type and utf-8 as character set. -->
<!-- If you want your application to work flawlessly with various local -->
<!-- characters, just make ALL strings, on the page, json and database utf-8. -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- Ext relies on its default css so include it here. -->
<!-- This must come BEFORE javascript includes! -->
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="ext/examples/ux/statusbar/css/statusbar.css"/>

<!-- Include here your own css files if you have them. -->

<!-- First of javascript includes must be an adapter... -->
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/examples/ux/statusbar/StatusBar.js"></script>

<!-- ...then you need the Ext itself, either debug or production version. -->
<script type="text/javascript" src="ext/ext-all-debug.js"></script>

<!-- Include here your extended classes if you have some. -->

<!-- Include here you application javascript file if you have it. -->

<!-- Set a title for the page (id is not necessary). -->
<title id="page-title">Title</title>

<!-- You can have onReady function here or in your application file. -->
<!-- If you have it in your application file delete the whole -->
<!-- following script tag as we must have only one onReady. -->
<script type="text/javascript">

var xmlhttp = false;

function initXmlHttp() {
    /*@cc_on @*/
    /*@if (@_jscript_version >= 5)
     // JScript gives us Conditional compilation, we can cope with old IE versions.
     // and security blocked creation of the objects.
     try {
     xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) {
     try {
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
     } catch (E) {
     xmlhttp = false;
     }
     }
     @end @*/
    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
        try {
            xmlhttp = new XMLHttpRequest();
        } catch (e) {
            xmlhttp = false;
        }
    }
    if (!xmlhttp && window.createRequest) {
        try {
            xmlhttp = window.createRequest();
        } catch (e) {
            xmlhttp = false;
        }
    }
    return xmlhttp
}

function handleFunctionCall(value) {
    var retVal;
    if (value.hasOwnProperty("_functionName_") &&
            value.hasOwnProperty("_instantiate_") &&
            value.hasOwnProperty("_parameter_")) {
        var fn = eval(value._functionName_);
        if (value._instantiate_)
            retVal = new fn(value._parameter_);
        else
            retVal = fn(value._parameter_);
    } else
        retVal = value;
    return retVal;
}

// The native JSON support does not convert any formatted date to date object.
// It must be done manually using this reviver function.
function handleJsonDate(value) {
    var reISO = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/;
    var reMsAjax = /^\/Date\((d|-|.*)\)\/$/;

    if (typeof value === 'string') {
        var a = reISO.exec(value);
        if (a) {
            alert("Date 1");
            return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4], +a[5], +a[6]));
        }
        a = reMsAjax.exec(value);
        if (a) {
            var b = a[1].split(/[-,.]/);
            return new Date(+b[0]);
        }
    }
    return value;
}

function layoutFields(form) {
    // send the edited cookie data and receive the response
    //xmlhttp.open("POST", "http://localhost:8088/servlets/cookie", true);
    xmlhttp.open("POST", "../servlets/cookie", true);

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4) {
            var jsonResponse = xmlhttp.responseText;
            var myObject = JSON.parse(jsonResponse, function(key, value) {
                return handleJsonDate(handleFunctionCall(value));
            });

            form.removeAll();
            form.add(myObject);
            form.doLayout();
        }

    }
    xmlhttp.send("abc")
}

/*!
 * Ext JS Library 3.3.0
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.onReady(function() {
    initXmlHttp()

    Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';

    var bd = Ext.getBody();

    /*
     * ================  Simple form  =======================
     */
    bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});

    //            function getMethods() {
    //                  for (i in this) {
    //                    alert(i); // shows getMethods, but not private methods
    //                  }
    //                }
    //            getMethods()

    var clazzName = "Ext.form.TimeField";
    var clazz = eval(clazzName);
    var inst = new clazz({
        fieldLabel: 'Time',
        name: 'time',
        minValue: '8:00am',
        maxValue: '6:00pm'
    })

    var timeFld = new Ext.form.TimeField({
        fieldLabel: 'Time',
        name: 'time',
        minValue: '8:00am',
        maxValue: '6:00pm'
    });
    var chkFld = new Ext.form.Checkbox({
        fieldLabel: 'Check1',
        listeners: {
            focus: function(field) {
                //alert("Focused")
            }
        },
        name: 'check1',
        checked: true
    });
    var simple = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        url:'save-form.php',
        frame:true,
        title: 'Simple Form',
        bodyStyle:'padding:5px 5px 0',
        width: 350,
        defaults: {width: 230},
        defaultType: 'textfield',

        //items: [],
        items: [timeFld, chkFld],

        buttons: [
            {
                text: 'Save',
                handler: function(btn, ev) {
                    layoutFields(simple)
                }
            },
            {
                text: 'Cancel'
            }
        ]
    });
    //layoutFields(simple);
    simple.render(document.body);

    /////////////////////////////////////////////

    // This is a shared function that simulates a load action on a StatusBar.
    // It is reused by most of the example panels.
    var loadFn = function(btn, statusBar) {
        btn = Ext.getCmp(btn);
        statusBar = Ext.getCmp(statusBar);

        btn.disable();
        statusBar.showBusy();

        (function() {
            statusBar.clearStatus({useDefaults:true});
            btn.enable();
        }).defer(2000);
    };

    /*
     * ================  Basic StatusBar example  =======================
     */

    alert("SB1");
    var sb = Ext.ux.StatusBar;
    alert("SB2" + sb);

    new Ext.Panel({
        title: 'Basic StatusBar',
        renderTo: 'basic',
        width: 550,
        height: 100,
        bodyStyle: 'padding:10px;',
        items:[
            {
                xtype: 'button',
                id: 'basic-button',
                text: 'Do Loading',
                handler: loadFn.createCallback('basic-button', 'basic-statusbar')
            }
        ]
        //        bbar: new Ext.ux.StatusBar({
        //            id: 'basic-statusbar',
        //
        //            // defaults to use when the status is cleared:
        //            defaultText: 'Default status text',
        //            //defaultIconCls: 'default-icon',
        //
        //            // values to set initially:
        //            text: 'Ready',
        //            //iconCls: 'x-status-valid',
        //
        //            // any standard Toolbar items:
        //            items: [
        //                {
        //                    text: 'Show Warning & Clear',
        //                    handler: function () {
        //                        var sb = Ext.getCmp('basic-statusbar');
        //                        sb.setStatus({
        //                            text: 'Oops!',
        //                            iconCls: 'x-status-error',
        //                            clear: true // auto-clear after a set interval
        //                        });
        //                    }
        //                },
        //                {
        //                    text: 'Show Busy',
        //                    handler: function () {
        //                        var sb = Ext.getCmp('basic-statusbar');
        //                        // Set the status bar to show that something is processing:
        //                        sb.showBusy();
        //                    }
        //                },
        //                {
        //                    text: 'Clear status',
        //                    handler: function () {
        //                        var sb = Ext.getCmp('basic-statusbar');
        //                        // once completed
        //                        sb.clearStatus();
        //                    }
        //                },
        //                '-',
        //                'Plain Text'
        //            ]
        //        })
    });

})

</script>


</head>
<body>
<!-- EXAMPLES -->
<h1>Dynamic Forms built with JavaScript</h1>

<p>
    These forms do not do anything and have very little validation. They solely demonstrate
    how you can use Ext Forms to build and layout forms on the fly.
</p>

<p>The js is not minified so it is readable.</p>

<div id="basic"></div>

</body>
</html>
